<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
   <h1 v-cloak>{{message}}</h1>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
/*
v-cloak指令:用于隐藏尚未完成编译的 DOM 模板。
该指令只在没有构建步骤的环境下需要使用
当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。
v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。
* */
setTimeout(()=>{
    const app = Vue.createApp({
        data() {
            return {
                message:"hello vue"
            }
        },
    })
    app.mount("#app")
},3000)
</script>
</body>
</html>